<template>
  <div class="co_audio">
    <!-- 音频页面 -->
    <div class="co_audio_box">
      <div class="co_aubox_image">
        <img
          :src="co_audio_image"
          alt=""
        >
      </div>
      <div class="co_aubox_title">
        {{co_audio_title}}
      </div>
      <!-- :style="{ width : wid - 40 +'px' }" -->
      <div class="jindu">
        <span>{{showcurrentTime}}</span>
        <div
          class="tiao"
          @mousedown="movel($event)"
        >
          <span
            class="jin"
            :style="{ width : bi + 'px' }"
          ></span>
          <span
            @mousedown="down($event)"
            @touchstart="down($event)"
            @mousemove="move($event)"
            @touchmove="move($event)"
            @mouseup="end($event)"
            @touchend="end($event)"
            class="niu"
            :style="{ left : bi +'px' }"
          ></span>
        </div>
        <span>{{showEndTime}}</span>
      </div>
      <div class="kongzhi">
        <div @click="co_audio_comment">
          <img
            src="https://o6wndwjxn.qnssl.com/%E5%88%97%E8%A1%A8@2x.png"
            alt=""
          >
          <div class="books_count">{{curriculumIndex + 1}}/{{Details.books_count}}</div>
        </div>
        <div @click="co_audio_up">
          <img
            :src="is_status == 1 ? 'https://o6wndwjxn.qnssl.com/%E5%B7%A6-%E4%B8%8D%E5%8F%AF%E7%82%B9%E5%87%BB@2x.png' : 'https://o6wndwjxn.qnssl.com/%20%E5%B7%A6@3x.png'"
            alt=""
          >
        </div>
        <div @click="bofang">
          <img
            :src="tu2"
            alt=""
          ></div>
        <div @click="co_audio_ne"><img
            :src="is_status == 1 ? 'https://o6wndwjxn.qnssl.com/%E5%B7%A6-%E4%B8%8D%E5%8F%AF%E7%82%B9%E5%87%BB@2x.png' : 'https://o6wndwjxn.qnssl.com/%20%E5%B7%A6@3x.png'"
            alt=""
          ></div>
        <div @click="jiasu"><img
            :src="audio_image"
            alt=""
          >
          <div style="font-family: PingFangSC-Regular;
font-size: 10px;
color: #999999;">倍速</div>
        </div>
      </div>
      <audio
        id="audio"
        ref='player'
        :src="co_audio_content"
        preload="metadata"
      ></audio>
    </div>

    <!-- 组件 -->
    <!-- <div
      class="VideoAudio_box"
      @click="Introduce_status_click"
    >
      <div>查看课程简介</div>
      <img
        src="http://o6wndwjxn.qnssl.com/7c452201810231644027976.png"
        alt=""
      >
    </div> -->
    <!-- <div class="co_video_Recommend">
			<div class="co_video_Recommend_title">猜你喜欢</div>
			<Recommend :type='co_video_Recommend_list'></Recommend>
		</div> -->
    <div style="height: 50px;"></div>
    <div class="co_video_bottom">
      <Button
        css='1'
        v-if="Details"
        :Details="Details"
        :is_gz="Details.is_gz"
        :type="co_video_Button"
        @Button_box_show='Introduce_status_click'
        @ButtonComment='ButtonComment'
        @ButtonCollection='ButtonCollection'
        @ButtonShare='ButtonShare'
      ></Button>
    </div>
    <div
      class="Catalog"
      v-show="Catalog_status"
      @click.self="Popup_close"
    >
      <Catalog
        :type='co_video_Catalog'
        @CatalogClose='CatalogClose'
        @CatalogInput='CatalogInput'
      ></Catalog>
    </div>
    <div
      class="Comment"
      v-show="Comment_status"
      @click.self="Popup_close"
    >
      <Comment
        :type='co_video_Comment'
        :c='co_audio_index'
        @CommentStatus='CommentStatus'
        @CommentZid='CommentZid'
        @PurStatus='PurStatus'
      ></Comment>
    </div>
    <div
      class="Introduce"
      v-show="Introduce_status"
      @click.self="Popup_close"
    >
      <Introduce
        :type='co_video_Introduce'
        @IntroduceClose='IntroduceClose'
      ></Introduce>
    </div>
    <div
      class="Purchase"
      v-show="Purchase_status"
    >
      <Purchase
        :type='cid'
        @PurchaseClose='PurchaseClose'
      ></Purchase>
    </div>
    <div
      class="Tips"
      v-show="co_audio_tips_status"
      @click="co_audio_tips_click"
    >
      <Tips :type='co_audio_tips'></Tips>
    </div>

    <div
      class="Buttonshare_box"
      v-show="Buttonshare_box"
      @click="Buttonshare_box_click"
    >
      <img
        src="http://o6wndwjxn.qnssl.com/60a3e201812271357334941.png"
        alt=""
      >
      <div>点击分享给好友或朋友圈!邀请好友一起听课</div>
    </div>
  </div>
</template>

<script>
import Catalog from '@/components/curriculum/Catalog.vue'
import Comment from '@/components/curriculum/Comment.vue'
import Introduce from '@/components/curriculum/Introduce.vue'
import Button from '@/components/curriculum/Button.vue'
import VideoAudio from '@/components/curriculum/VideoAudio.vue'
import Recommend from '@/components/curriculum/Recommend.vue'
import Purchase from '@/components/curriculum/Purchase.vue'
import Tips from '@/components/public/Tips.vue'
import {
  mapState
} from 'vuex'
import { cnreading } from '@/api/assemble'
import {
  button_gochapter,
  class_list,
  comment_list,
  go_content,
  search_popularity,
  user_ke,
  collection_onclick,
  dqtimes
} from '@/api/co_audio'
export default {
  components: {
    Catalog,
    Comment,
    Introduce,
    Button,
    VideoAudio,
    Recommend,
    Tips,
    Purchase
  },
  computed: {
    ...mapState({
      select: state => state.audio.select,
      app_id: state => state.app_id,
      user_id: state => state.member_id,
      audioplayer: state => state.audio.audioplayer
    }),
    audioPlayerCurrentTime: {
      get () {
        return this.$store.getters.vuexCurrentTime
      },
      set: function (val) {
        console.log(val)
      }
    }
  },
  watch: {
    audioPlayerCurrentTime (val) {
      this.ProgressBar()
    }
  },
  data () {
    return {
      showcurrentTime: '00:00',
      showEndTime: '00:00',
      curriculumIndex: '', // 传入的索引index
      is_status: '',
      Details: '',
      cid: '',
      zid: '',
      stime: 0,
      Buttonshare_box: false,
      Catalog_status: false,
      Comment_status: false,
      Introduce_status: false,
      co_audio_tips_status: false,
      co_video_Catalog: [],
      co_video_Comment: [],
      co_video_Introduce: '',
      co_video_Button: true,
      co_video_Recommend_list: [],
      co_audio_image: '',
      co_audio_title: '',
      co_audio_content: '',
      co_video_status: false,
      Purchase_status: false,
      co_audio_tips: '空空如也',
      co_audio_index: 0,
      wid: document.documentElement.scrollWidth || document.body.scrollWidth,
      ntime: '00:00',
      etime: '00:00',
      bi: 0,
      nx: '',
      dx: '',
      xPum: '',
      position: {
        x: 0,
        y: 0
      },
      // https://o6wndwjxn.qnssl.com/%E5%B7%A6-%E4%B8%8D%E5%8F%AF%E7%82%B9%E5%87%BB@2x.png
      tu1: 'https://o6wndwjxn.qnssl.com/%E6%92%AD%E6%94%BE@2x.png',
      tu: 'https://o6wndwjxn.qnssl.com/%E6%9A%82%E5%81%9C@2x.png',
      tu2: '',
      audio_image: '',
      audio_num: 0,
      audio_speed: [
        'https://o6wndwjxn.qnssl.com/1.00.svg', // 1
        'https://o6wndwjxn.qnssl.com/1.20.svg', // 1.25
        'https://o6wndwjxn.qnssl.com/1.50.svg', // 1.5
        'https://o6wndwjxn.qnssl.com/2.00.svg', // 2
        'https://o6wndwjxn.qnssl.com/0.70.svg' // 0.7
      ]

    }
  },
  destroyed () {
    let requery = {
      app_id: this.app_id,
      user_id: this.user_id,
      member_id: this.user_id,
      curriculum_id: this.co_curriculum_id,
      chapter_id: this.zid,
      time: this.$store.state.audio.audioplayer.audio.currentTime,
      stime: this.stime,
      etime: Date.parse(new Date()) / 1000
    }
    console.log('离开请求', requery)
    dqtimes(requery).then(res => {})
    cnreading(requery).then(res => {
      console.log(res)
    })
  },
  created () {
    this.audio_num = 0
    this.cid = this.$route.query.curriculum_id
    this.zid = this.$route.query.chapter_id
    this.getDetails()
    this.getChapter()
    this.getCatalog()
    this.getRecommend()
    this.getCollection()
    this.tu2 = this.tu1
    this.audio_image = this.audio_speed[0]
    this.stime = Date.parse(new Date()) / 1000
  },
  mounted () {
    if (this.audioplayer !== '' && this.select.chapter_id === this.zid) {
      this.$nextTick(() => {
        if (!this.$store.state.audio.audioplayer.paused) {
          this.tu2 = this.tu
        }
      })
    }
  },
  beforeDestroyed () {
    this.removeEventListeners()
  },
  methods: {
    // 滚动条进度
    ProgressBar () {
      if (this.audioPlayerCurrentTime !== 0) {
        // 当前播放时间
        this.showcurrentTime = this.chuli(Math.floor(this.audioPlayerCurrentTime))
        // 音频结束事件
        if (this.audioPlayerCurrentTime !== 0) {
          this.showEndTime = this.chuli(this.audioplayer.audio.duration)
        }
        // 进度条
        this.jindutiao = document.querySelector('.tiao').offsetWidth - 12
        this.bi = (this.jindutiao / this.audioplayer.audio.duration) * this.audioPlayerCurrentTime
      } else {
        this.bi = 0
        this.showcurrentTime = '00:00'
        this.showEndTime = '00:00'
      }
      // console.log(this.audioPlayerCurrentTime)
    },
    // 播放按钮
    bofang () {
      if (this.audioplayer.audio.paused) {
        this.tu2 = this.tu
        this.audioplayer.play()
      } else {
        this.tu2 = this.tu1
        this.audioplayer.pause()
      }
    },
    Buttonshare_box_click () {
      this.Buttonshare_box = false
    },
    ButtonShare () {
      this.Buttonshare_box = true
    },
    Introduce_status_click () {
      this.Introduce_status = true
    },
    ButtonCollection () {
      let requery = {
        app_id: this.app_id,
        user_id: this.user_id,
        curriculum_id: this.cid
      }
      collection_onclick(requery).then(res => {
        let {
          code
        } = res.data
        // console.log('?1',data)
        if (code == 200) {
          // this.co_video_Button = false
          this.getDetails()
        }
      })
    },
    getCollection () {
      let requery = {
        app_id: this.app_id,
        user_id: this.user_id,
        type: 3
      }
      user_ke(requery).then(res => {
        let {
          data
        } = res.data
        // console.log('收藏列表', data)
        for (var i = 0; i < data.length; i++) {
          if (data[i].curriculum_id == this.cid) {
            this.co_video_Button = false
          }
        }
      })
    },
    co_audio_tips_click () {
      this.co_audio_tips_status = false
    },
    getRecommend () {
      let requery = {
        app_id: this.app_id
      }
      search_popularity(requery).then(res => {
        let {
          code,
          data
        } = res.data
        if (code == 200) {
          // console.log('猜你喜欢',data)
          this.co_video_Recommend_list = data
        }
      })
    },
    getChapter () {
      let requery = {
        app_id: this.app_id,
        curriculum_id: this.cid
      }
      class_list(requery).then(res => {
        let {
          code,
          data
        } = res.data
        if (code == 200) {
          let that = this
          for (let index = 0; index < data.length; index++) {
            data[index].status = false
            if (data[index].chapter_id == that.zid) {
              data[index].status = true
              that.curriculumIndex = index
              that.co_audio_index = index
            }
          }
          this.co_video_Comment = data
          // console.log('组装数组',this.co_video_Comment)
        }
      })
    },
    getDetails (idx) {
      return new Promise((resolve, reject) => {
        let requery = {
          app_id: this.app_id,
          curriculum_id: this.cid,
          chapter_id: this.zid,
          user_id: this.user_id
        }
        this.tu2 = this.tu1
        button_gochapter(requery).then(res => {
          this.Comment_status = false
          this.$store.commit('updateLoadingStatus', { isLoading: false })
          let {
            code,
            data
          } = res.data
          // console.log('章节详情', data)
          if (code == 200) {
            resolve('sucess')
            this.is_status = data.is_status
            this.co_audio_image = data.cover
            this.co_audio_title = data.title
            this.co_audio_content = data.content
            this.$store.commit('homeaudio', data.content)
            this.co_video_Introduce = data.chapter_introduction
            this.co_curriculum_id = data.curriculum_id
            this.Details = data
            if (data.time_list !== null) {
              this.time_list = data.time_list
              // let zhixingyici = 1
              // this.$nextTick(() => {
              //   this.$refs.player.oncanplay = () => {
              //     if (zhixingyici === 1) {
              //       this.$store.state.audio.audioplayer.audio.currentTime = this.time_list.time
              //     }
              //     zhixingyici++
              //   }
              // })
            }
          } else {
            resolve('error')
            if (idx) {
              if (idx === 2) {
                this.curriculumIndex = this.curriculumIndex - 1
                this.zid = this.co_video_Comment[this.curriculumIndex].chapter_id
                this.getDetails()
              } else {
                this.curriculumIndex = this.curriculumIndex + 1
                this.zid = this.co_video_Comment[this.curriculumIndex].chapter_id
                this.getDetails()
              }
            }
            this.Purchase_status = true
          }
        })
      })
    },
    getCatalog () {
      let requery = {
        app_id: this.app_id,
        curriculum_id: this.cid
      }
      comment_list(requery).then(res => {
        let {
          code,
          data
        } = res.data
        if (code == 200) {
          // console.log('全部评论',data)
          this.co_video_Catalog = data
        }
      })
    },
    co_audio_comment () {
      this.Comment_status = true
    },
    PurStatus () {
      this.Purchase_status = true
    },
    co_audio_up () {
      if (this.is_status == 1) {
        return false
      } else {
        if (this.curriculumIndex - 1 >= 0) {
          this.curriculumIndex = this.curriculumIndex - 1
          this.zid = this.co_video_Comment[this.curriculumIndex].chapter_id
          // this.$refs.player.pause()
          // this.tu2 = this.tu1
          this.getDetails(1).then(res => {
            // this.audioplayer.play()
          })
        } else {
          this.co_audio_tips_status = true
          this.co_audio_tips = '没有上一课'
        }
      }
    },
    co_audio_ne () {
      if (this.is_status == 1) {
        return false
      } else {
        if (parseInt(this.curriculumIndex) + 1 <= this.co_video_Comment.length - 1) {
          this.curriculumIndex = parseInt(this.curriculumIndex) + 1
          this.zid = this.co_video_Comment[this.curriculumIndex].chapter_id
          console.log(this.zid)
          // this.tu2 = this.tu1
          this.getDetails(2)
        } else {
          this.co_audio_tips_status = true
          this.co_audio_tips = '没有下一课'
        }
      }
    },
    // 倍速播放
    jiasu () {
      this.audio_num += 1
      console.log(this.audio_num)
      if (this.audio_num === 1) {
        this.audioplayer.audio.playbackRate += 0.20
      }
      if (this.audio_num === 2) {
        this.audioplayer.audio.playbackRate += 0.50
      }
      if (this.audio_num === 3) {
        this.audioplayer.audio.playbackRate = 2
      }
      if (this.audio_num === 4) {
        this.audioplayer.audio.playbackRate = 0.7
      }
      if (this.audio_num === 5) {
        this.audioplayer.audio.playbackRate = 1
        this.audio_num = 0
      }
      this.audio_image = this.audio_speed[this.audio_num]
    },
    movel (e) {
      if (e.offsetX > parseInt(this.wid - 55)) {
        this.bi = this.wid - 55
        this.showcurrentTime = this.chuli(Math.floor(this.audioPlayerCurrentTime))
        this.audioplayer.audio.currentTime = this.audioplayer.audio.duration
      } else {
        let aaa = e.offsetX / this.jindutiao * this.audioplayer.audio.duration
        this.bi = e.offsetX
        this.showcurrentTime = this.chuli(aaa)
        this.audioplayer.audio.currentTime = aaa
      }
    },
    chuli (e) {
      let t = ''
      let m = Math.floor(e / 60) % 60
      let s = e % 60
      if (m < 10) {
        t += '0'
      }
      t += m + ':'
      if (s < 10) {
        t += '0'
      }
      t += s.toFixed(0)
      return t
    },
    down (e) {
      this.flags = true
      var touch
      if (event.touches) {
        touch = event.touches[0]
      } else {
        touch = event
      }
      this.position.x = touch.clientX
      this.dx = e.target.offsetLeft
    },
    move (e) {
      if (this.flags) {
        var touch
        if (event.touches) {
          touch = event.touches[0]
        } else {
          touch = event
        }
        this.nx = touch.clientX - this.position.x
        let bbb = parseInt(this.audioplayer.audio.duration / (parseInt(this.jindutiao)) * parseInt(this.dx + this.nx))
        if (this.dx + this.nx > (this.jindutiao)) {
          // this.bi = this.jindutiao
          // this.ntime = this.chuli(this.timeDuration)
          // this.$refs.player.currentTime = this.timeDuration
        } else {
          this.bi = this.dx + this.nx
          this.audioplayer.audio.currentTime = bbb
        }
        // if (this.dx + this.nx < 0) {
        //   this.bi = 0
        //   this.$refs.player.currentTime = 0
        //   this.ntime = '00:00'
        // }
        // this.xPum = this.bi
        // e.target.style.left = this.xPum + 'px'
        document.addEventListener('touchmove', function (event) {
          if (event.cancelable) {
            if (!event.defaultPrevented) {
              event.preventDefault()
            }
          }
        }, false)
      }
    },
    end (e) {
      this.flags = false
    },
    ButtonComment () {
      this.Catalog_status = true
    },
    CatalogInput (e) {
      let requery = {
        app_id: this.app_id,
        user_id: this.user_id,
        content: e,
        curriculum_id: this.cid
      }
      go_content(requery).then(res => {
        let {
          code,
          data
        } = res.data
        if (code == 200) {
          this.getCatalog()
        }
      })
    },
    CommentZid (e) {
      this.zid = e[1]
      this.getDetails().then(res => {
        if (res === 'sucess') {
          this.co_audio_index = e[0]
          this.curriculumIndex = e[0]
        }
      })
    },
    CommentStatus () {
      this.Popup_close()
    },
    IntroduceClose () {
      this.Popup_close()
    },
    CatalogClose () {
      this.Popup_close()
    },
    PurchaseClose () {
      this.Popup_close()
    },
    Popup_close () {
      this.Catalog_status = false
      this.Comment_status = false
      this.Introduce_status = false
      this.Purchase_status = false
    }
  }
}
</script>

<style scoped>
.books_count {
  width: 100%;
  text-align: left;
  font-family: PingFangSC-Regular;
  font-size: 10px;
  margin-top: 6px;
  color: #999999;
}
.Buttonshare_box {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 500;
  overflow: hidden;
  text-align: center;
}
.Buttonshare_box > img {
  width: 57px;
  height: 203px;
  margin-top: 15px;
  margin-left: calc(100vw - 100px);
  margin-right: 43px;
}
.Buttonshare_box > div {
  display: inline-block;
  max-width: 90vw;
  padding: 15px 25px;
  font-size: 13px;
  color: white;
  background: #da4134;
  border-radius: 500px;
  margin-top: 15px;
}
.Tips {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}

.co_audio_time {
  width: 100%;
  display: flex;
  margin-top: 5px;
}

.co_audio_time > span {
  flex: 1;
  font-size: 12px;
  color: #999999;
}

.co_audio_time > span:last-child {
  text-align: right;
}

/*  */
.jindu {
  width: 88%;
  margin: 60px auto 40px auto;
  display: flex;
  align-items: center;
}

.jindu span {
  display: inline-block;
  font-size: 15px;
}
.jindu > span {
  flex: 1;
  color: #999999;
  font-family: PingFangSC-Regular;
  font-size: 11px;
}
.jindu > span:nth-child(3) {
  text-align: right;
}
/* .jindu > span:nth-child(1),
  width: 5%;
  line-height: 10px;
  height: 6px;
} */

.tiao {
  display: block;
  height: 3px;
  background-color: #eeeeee;
  border-radius: 5px;
  position: relative;
  margin: 3px 0;
  width: 68vw;
  flex: 0 0 68vw;
}

.niu {
  display: block;
  width: 12px;
  height: 12px;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.12);
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  touch-action: none;
}

.jin {
  position: absolute;
  height: 3px;
  width: 40px;
  background-color: #da4131;
  border-radius: 15px;
  left: 0;
}

.kongzhi {
  display: flex;
  width: 88%;
  align-items: center;
  margin: 0px auto;
}

.kongzhi div {
  flex: 1;
  overflow: hidden;
  vertical-align: middle;
  position: relative;
}
.kongzhi > div img {
  width: 100%;
}
.kongzhi > div:nth-of-type(2) {
  text-align: center;
}
.kongzhi > div:nth-child(1) img {
  transform-origin: 50%;
  width: 20px;
}

.kongzhi > div:nth-child(2) img {
  /* transform-origin: 50% 95%; */
  /* transform: scale(0.4); */
  width: 20px;
  height: 21px;
  /* opacity: 0.6; */
}
.kongzhi > div:nth-child(4) {
  text-align: center;
}
.kongzhi > div:nth-child(5) {
  text-align: right;
}
.kongzhi > div:nth-child(4) img {
  width: 20px;
  height: 21px;
  /* transform-origin: 50% 95%; */
  transform: rotate(180deg);
  /* opacity: 0.6; */
}
.kongzhi > div:nth-child(3) {
  text-align: center;
}
.kongzhi > div:nth-child(3) img {
  /* transform-origin: 50%; */
  /* transform: scale(0.85); */
  /* box-shadow: 2px 4px 9px rgba(0, 167, 156, 0.2); */
  border-radius: 50%;
  height: 50px;
  width: 50px;
  /* position: absolute; */
  /* left: 50%;
  top: 50%; */
  /* transform: translate(-50%, -50%); */
}
.kongzhi > div:nth-child(5) div {
  margin-top: 6px;
}
.kongzhi > div:nth-child(5) img {
  width: 22px;
  height: 22px;
  /* transform-origin: 50%; */
  /* transform: scale(0.38); */
}

.co_aubox_progress {
  width: 90%;
  margin: 0 5%;
  height: 50px;
}

.co_aubox_progress_one {
  display: inline-block;
  width: 100%;
  height: 6px;
  background: #ebebeb;
  border-radius: 50px;
  margin-top: 30px;
  position: relative;
}

.co_aubox_progress_two {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  height: 100%;
  width: 20%;
  background: #f29911;
  border-radius: 50px;
}

.co_aubox_progress_two:after {
  position: absolute;
  content: "";
  right: -5px;
  top: -5px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #f29911;
}

.co_aubox_image {
  width: 90%;
  margin: 0 5%;
}

.co_aubox_image > img {
  width: 90vw;
  height: calc(90vw * 0.63);
  object-fit: cover;
  margin-top: 20px;
  border-radius: 6px;
  box-shadow: 4px 7px 14px rgba(51, 51, 51, 0.2);
}

.co_aubox_title {
  width: 80%;
  margin: 0 10%;
  margin-top: 30px;
  text-align: center;
  font-size: 15px;
  color: #1a1a1a;
  font-weight: bold;
}

.Catalog,
.Comment,
.Introduce,
.Purchase {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100;
}

.VideoAudio_box,
.co_video_Recommend {
  width: 90%;
  margin: 0 5%;
  position: relative;
}

.co_video_bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 50px;
  background: white;
  border-top: 1px solid #eeeeee;
}

.co_video_Recommend_title {
  width: 100%;
  height: 55px;
  line-height: 55px;
  font-size: 16px;
  color: #1a1a1a;
  font-weight: bold;
}

.VideoAudio_box > div {
  border: 1px solid #eeeeee;
  border-left: none;
  border-right: none;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  color: #1a1a1a;
  font-weight: bold;
}

.VideoAudio_box > img {
  position: absolute;
  right: 0;
  top: 19px;
  height: 15px;
}
</style>
